<template>
  <div class="company-user">
    <index-breadcrumb :breadcrumb-list="breadcrumbList"></index-breadcrumb>
<!--    <company-user-list :operation-list="operationList"></company-user-list>-->
    <div style="display: flex">
      <file-type-list @chooseType="chooseType" :changeType="changeType" style="width: 350px" :operation-list="operationList"></file-type-list>
      <file-list :typeId="typeId" :changeType="changeType" @changeTypeNumber="changeTypeNumber" :operation-list="operationList" style="margin-left: 20px;"></file-list>
    </div>
  </div>
</template>

<script>
// import CompanyUserList from "@/views/sys/userRole/includes/CompanyUserList";
import FileTypeList from "@/views/sys/userRole/includes/FileTypeList";
import FileList from "@/views/sys/userRole/includes/FileList";

export default {
  name: "UserRole",
  components: {
    // CompanyUserList,
    FileTypeList,
    FileList,
  },
  data() {
    return {
      operationList: [],
      breadcrumbList: [
        {
          title: "系统管理"
        },
        {
          title: "角色管理"
        }
      ],
      changeType: 0,
      typeId: null,
    };
  },
  created() {
    this.getOperationList();
  },
  methods: {
    changeTypeNumber(val){
      this.changeType = val
    },
    chooseType(val){
      this.typeId = val
    },
    getOperationList() {
      this.$store.state.permissionList.forEach(item => {
        const [itemName] = item.permission.split(":");
        if (itemName === "role") {
          this.operationList = item.list.map(listItem => {
            return listItem.permission.split(":")[1];
          });
        }
      });
    }
  }
};
</script>

<style lang="sass" scoped>

</style>
